<template>
	<view class="uni_box home">
		<navbar title='费用明细'>
		</navbar>
		<view class="content">
			<!-- <view class="mingone">
				<view class="items">
					<view class="mingitem">
						<view class="mleft">
							一天单
						</view>
						<scroll-view scroll-x class="mright">
							<view class="ritem" v-for="(item,index) in 20" :key="index">
								<text class="times">02-24</text>
								<text class="ztai">已招满</text>
							</view>
						</scroll-view>
					</view>
					<text class="zong">02-24,招1人</text>
				</view>
				<view class="items">
					<view class="mingitem">
						<view class="mleft">
							一天单
						</view>
						<scroll-view scroll-x class="mright">
							<view class="ritem">
								<text class="times">02-24</text>
								<text class="ztai">已招满</text>
							</view>
						</scroll-view>
					</view>
					<text class="zong">02-24,招1人</text>
				</view>
			</view> -->
			

			<view class="mingtwo">
				<view class="mhead">
					<view class="one" v-for="(item,index) in titlelist" :key="index">{{item}}</view>
				</view>
				<view class="mnav"  v-for="(item,index) in datalist" :key="index">
					<view class="one" v-for="(i,ind) in item" :key="ind">{{i}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				task_id:'',
				datalist:[],
				titlelist:[]
			}
		},
		onLoad(option) {
			if(option.task_id){
				this.task_id = option.task_id
			}
			this.getmingxi()
		},
		onShow() {
		},
		methods: {
			async getmingxi(){
				let res = await this.$u.api.getPriceList({
					task_id:this.task_id
				});
				this.titlelist = res.title
				this.datalist = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5f5f5;
	}
	.content{
		background-color: #F5f5f5;
		.zong{
			display: block;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			margin-top: 10rpx;
		}
		.items{
			margin-bottom: 30rpx;
		}
		.items:last-child{
			margin-bottom: 0;
		}
		.mingone{
			padding: 30rpx;
			background-color: #fff;
			.mingitem{
				background: rgba(248,248,248,0.2);
				border-radius: 20rpx;
				border: 1rpx solid #FF3B3B;
				display: flex;
				flex-direction: row;
				// height: 120rpx;
				max-height: 150rpx;
				position: relative;
				.mleft{
					width: 60rpx;
					height: 100%;
					background: linear-gradient(90deg, #FF8F39, #FF4D43);
					border-radius: 20rpx 0rpx 0rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 800;
					font-size: 28rpx;
					color: #F5F5F5;
					writing-mode:vertical-rl;
				}
				.mright{
					padding: 10rpx;
					white-space: nowrap;
					overflow-x: auto;
					// flex: 1;
					// display: flex;
					// flex-direction: row;
					// flex-wrap: wrap;
					.ritem{
						padding: 20rpx;
						background: linear-gradient(90deg, rgba(255, 143, 57, 0.1), rgba(255, 77, 67, 0.1));
						border-radius: 10rpx;
						border: 1rpx solid #FF3B3B;
						display: inline-block;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						.times{
							font-weight: 800;
							font-size: 28rpx;
							color: #111111;
							display: block;
						}
						.ztai{
							font-weight: 800;
							font-size: 28rpx;
							color: #FF5542;
						}
					}
				}
			}
		}

		.mingtwo{
			background: #FFFFFF;
			// border-radius: 30rpx;
			margin-top: 20rpx;
			.mhead{
				display: flex;
				flex-direction: row;
				view{
					font-weight: 800;
					font-size: 28rpx;
					color: #111111;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 20rpx 0;
				}
			}
			.mnav{
				display: flex;
				flex-direction: row;
				view{
					font-weight: 400;
					font-size: 26rpx;
					color: #111111;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 25rpx 0;
				}
			}
		}
	}
</style>
